<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--要求页面自动适应浏览器的屏幕-->
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,user-scalable=no">
    <link href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/sockjs-client/1.0.3/sockjs.js"></script>
    <script src="https://cdn.bootcss.com/stomp.js/2.3.3/stomp.min.js"></script>
    <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
    <title>手环测试页面</title>
</head>
<body>
<div class="panel-body">
    <button type="button" class="btn btn-info" onclick="connect()">
        连接服务器
    </button>
    <button type="button" class="btn btn-info" onclick="disconnect()">
        断开服务器
    </button>
    <div id="vue">
        <ul class="list-group">
            <li class="list-group-item" v-for="item in sj">{{item}}</li>
        </ul>
    </div>
</div>
<script>
    var v=new Vue({
        el:"#vue",
        data:{
            sj:[]
        }
    })

</script>
<script type="text/javascript">
    var stompClient = null;
    var boot=false;
    function connect() {
        const socket = new SockJS('/endpointSang');
        boot=true;
        stompClient = Stomp.over(socket);
        stompClient.connect({}, function (frame) {
            stompClient.subscribe('/topic/shouhuan', function (response) {
                v.sj.push(response.body);
            });
        });
    }
    function disconnect() {
        if (stompClient != null) {
            stompClient.disconnect();
        }
    }
</script>
</body>
</html>